<template>
  <div class="header-container">
    <!-- 左侧标题和折叠按钮 -->
    <div class="header-left">
      <el-button
        type="text"
        @click="toggleCollapse"
        class="collapse-btn"
      >
        <el-icon size="18">
          <Fold v-if="!isCollapse" />
          <Expand v-else />
        </el-icon>
      </el-button>

      <div class="system-title">
        <el-icon class="title-icon"><Shop /></el-icon>
        <span class="title-text">校园订餐管理系统</span>
      </div>
    </div>

    <!-- 右侧用户信息 -->
    <div class="header-right">
      <!-- 通知图标 -->
      <el-badge :value="notificationCount" :hidden="notificationCount === 0" class="notification-badge">
        <el-button type="text" class="header-btn">
          <el-icon size="18"><Bell /></el-icon>
        </el-button>
      </el-badge>

      <!-- 用户下拉菜单 -->
      <el-dropdown @command="handleCommand" class="user-dropdown">
        <div class="user-info">
          <el-avatar :size="32" class="user-avatar">
            <el-icon><User /></el-icon>
          </el-avatar>
          <div class="user-text">
            <span class="username">{{ userInfo.full_name || '用户' }}</span>
            <span class="user-role">{{ getRoleDisplayName(userInfo.role) }}</span>
          </div>
          <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
        </div>

        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">
              <el-icon><User /></el-icon>
              个人信息
            </el-dropdown-item>
            <el-dropdown-item command="settings">
              <el-icon><Setting /></el-icon>
              系统设置
            </el-dropdown-item>
            <el-dropdown-item divided command="logout">
              <el-icon><SwitchButton /></el-icon>
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import {
  Fold,
  Expand,
  Shop,
  Bell,
  User,
  ArrowDown,
  Setting,
  SwitchButton
} from '@element-plus/icons-vue'
import { getCurrentUser, clearAuth, getRoleDisplayName, isAdmin } from '@/utils/auth'

const router = useRouter()

// 定义 props 和 emits
const props = defineProps({
  collapse: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['toggle-collapse'])

// 响应式数据
const isCollapse = ref(props.collapse)
const notificationCount = ref(3) // 模拟通知数量
const userInfo = reactive({
  full_name: '',
  username: '',
  email: ''
})

// 从本地存储获取用户信息
const getUserInfo = () => {
  try {
    const user = getCurrentUser()
    if (user) {
      Object.assign(userInfo, user)
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

// 切换侧边栏折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
  emit('toggle-collapse')
}

// 处理下拉菜单命令
const handleCommand = async (command) => {
  switch (command) {
    case 'profile':
      // 跳转到个人信息页面
      ElMessage.info('个人信息功能开发中...')
      break
    case 'settings':
      // 跳转到设置页面
      ElMessage.info('系统设置功能开发中...')
      break
    case 'logout':
      await handleLogout()
      break
  }
}

// 退出登录
const handleLogout = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要退出登录吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    // 使用权限工具类清除认证信息
    clearAuth()

    ElMessage.success('退出登录成功')
    router.push('/login')
  } catch {
    // 用户取消退出
  }
}

// 组件挂载时获取用户信息
onMounted(() => {
  getUserInfo()
})
</script>

<style lang="less" scoped>
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.collapse-btn {
  padding: 8px;
  border-radius: 6px;
  transition: all 0.3s ease;

  &:hover {
    background: #f5f5f5;
  }
}

.system-title {
  display: flex;
  align-items: center;
  gap: 8px;

  .title-icon {
    font-size: 24px;
    color: #1890ff;
  }

  .title-text {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.notification-badge {
  .header-btn {
    padding: 8px;
    border-radius: 6px;
    transition: all 0.3s ease;

    &:hover {
      background: #f5f5f5;
    }
  }
}

.user-dropdown {
  cursor: pointer;

  .user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;

    &:hover {
      background: #f5f5f5;
    }

    .user-avatar {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      flex-shrink: 0;
    }

    .user-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-left: 8px;

      .username {
        font-size: 14px;
        color: #333;
        font-weight: 500;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.2;
      }

      .user-role {
        font-size: 12px;
        color: #666;
        margin-top: 2px;
        padding: 1px 6px;
        background: #f0f2f5;
        border-radius: 10px;
        line-height: 1;
      }
    }

    .dropdown-icon {
      font-size: 12px;
      color: #999;
      transition: transform 0.3s ease;
    }
  }

  &:hover .dropdown-icon {
    transform: rotate(180deg);
  }
}

// 下拉菜单样式
:deep(.el-dropdown-menu) {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #e8e8e8;

  .el-dropdown-menu__item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;

    &:hover {
      background: #f5f5f5;
    }

    .el-icon {
      font-size: 16px;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .header-container {
    padding: 0 16px;
  }

  .system-title {
    .title-text {
      display: none;
    }
  }

  .user-info {
    .user-text {
      display: none;
    }
  }
}
</style>
